
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>任务详情 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B6EF7;
      --primary-light: #E8EBFA;
      --success: #4CD964;
      --success-light: #E6F7EA;
      --warning: #FFCC00;
      --warning-light: #FFF8E6;
      --danger: #FF5252;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --premium: #FFB800;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      font-size: 15px;
      line-height: 1.6;
      padding-bottom: 80px;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-btn {
      color: var(--primary);
      font-size: 16px;
      background: none;
      border: none;
      padding: 5px 10px;
      font-weight: 500;
    }
    
    .back-btn {
      color: var(--text-primary);
      font-size: 20px;
    }
    
    /* 任务头部 */
    .task-header {
      background-color: var(--bg-white);
      margin: 12px;
      border-radius: 12px;
      padding: 20px 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border-top: 4px solid var(--primary);
    }
    
    .task-badge {
      display: inline-block;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 12px;
      margin-bottom: 10px;
    }
    
    .badge-daily {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .badge-weekly {
      background-color: var(--success-light);
      color: var(--success);
    }
    
    .badge-monthly {
      background-color: var(--warning-light);
      color: #E6A23C;
    }
    
    .badge-premium {
      background-color: rgba(255, 184, 0, 0.15);
      color: var(--premium);
    }
    
    .task-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .task-meta {
      display: flex;
      justify-content: space-between;
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 15px;
    }
    
    .task-time {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .task-difficulty {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* 奖励展示 */
    .rewards-section {
      background-color: var(--bg-white);
      margin: 0 12px 12px;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .section-icon {
      color: var(--primary);
    }
    
    .rewards-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    
    .reward-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background-color: var(--bg-light);
      padding: 8px 15px;
      border-radius: 8px;
    }
    
    .reward-icon {
      color: var(--premium);
      font-size: 18px;
    }
    
    .reward-text {
      font-size: 14px;
      font-weight: 500;
    }
    
    .reward-highlight {
      background-color: rgba(255, 184, 0, 0.1);
      border: 1px dashed var(--premium);
    }
    
    /* 进度展示 */
    .progress-section {
      background-color: var(--bg-white);
      margin: 0 12px 12px;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .progress-container {
      margin: 10px 0 15px;
    }
    
    .progress-bar-container {
      height: 10px;
      background-color: var(--bg-light);
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    
    .progress-bar {
      height: 100%;
      background-color: var(--primary);
      border-radius: 5px;
      transition: width 0.3s ease;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--text-secondary);
    }
    
    .progress-steps {
      margin-top: 20px;
    }
    
    .step-item {
      display: flex;
      margin-bottom: 20px;
      position: relative;
    }
    
    .step-item:last-child {
      margin-bottom: 0;
    }
    
    .step-item::after {
      content: '';
      position: absolute;
      left: 14px;
      top: 24px;
      bottom: -20px;
      width: 2px;
      background-color: var(--border-light);
      z-index: 1;
    }
    
    .step-item:last-child::after {
      display: none;
    }
    
    .step-number {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: var(--bg-light);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      margin-right: 15px;
      z-index: 2;
    }
    
    .step-number.active {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .step-number.completed {
      background-color: var(--success-light);
      color: var(--success);
    }
    
    .step-content {
      flex: 1;
    }
    
    .step-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .step-desc {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .step-status {
      font-size: 13px;
      padding: 2px 8px;
      border-radius: 10px;
      display: inline-block;
    }
    
    .status-pending {
      background-color: var(--warning-light);
      color: #E6A23C;
    }
    
    .status-completed {
      background-color: var(--success-light);
      color: var(--success);
    }
    
    /* 任务说明 */
    .instructions-section {
      background-color: var(--bg-white);
      margin: 0 12px 12px;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .instruction-list {
      padding-left: 20px;
    }
    
    .instruction-item {
      margin-bottom: 10px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
    }
    
    .instruction-item:last-child {
      margin-bottom: 0;
    }
    
    /* 常见问题 */
    .faq-section {
      background-color: var(--bg-white);
      margin: 0 12px 12px;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .faq-item {
      margin-bottom: 15px;
      border-bottom: 1px solid var(--border-light);
      padding-bottom: 15px;
    }
    
    .faq-item:last-child {
      margin-bottom: 0;
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .faq-question {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    
    .faq-question i {
      color: var(--primary);
      margin-top: 4px;
    }
    
    .faq-answer {
      color: var(--text-secondary);
      font-size: 14px;
      padding-left: 24px;
      line-height: 1.5;
    }
    
    /* 底部操作按钮 */
    .action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      z-index: 100;
    }
    
    .action-btn {
      flex: 1;
      padding: 12px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      text-align: center;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-secondary {
      background-color: var(--bg-light);
      color: var(--text-primary);
    }
    
    .btn-success {
      background-color: var(--success);
      color: white;
    }
    
    .btn-disabled {
      background-color: var(--bg-light);
      color: var(--text-secondary);
      cursor: not-allowed;
    }
    
    /* 底部导航 */
    .bottom-nav {
      display: none; /* 在详情页通常隐藏底部导航，专注于任务完成 */
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <a href="#" class="back-btn">
      <i class="fa fa-arrow-left"></i>
    </a>
    <div class="header-title">任务详情</div>
    <button class="header-btn">
      规则说明
    </button>
  </div>
  
  <!-- 任务头部 -->
  <div class="task-header">
    <span class="task-badge badge-weekly">每周任务</span>
    <h1 class="task-title">邀请3位新好友加入社区</h1>
    <div class="task-meta">
      <div class="task-time">
        <i class="fa fa-calendar-o"></i>
        <span>剩余4天23小时</span>
      </div>
      <div class="task-difficulty">
        <i class="fa fa-signal"></i>
        <span>中等难度</span>
      </div>
    </div>
    <p>成功邀请3位新用户注册并完成新手引导，扩展你的社交圈同时获得丰厚奖励。</p>
  </div>
  
  <!-- 奖励展示 -->
  <div class="rewards-section">
    <h2 class="section-title">
      <i class="fa fa-gift section-icon"></i>
      任务奖励
    </h2>
    <div class="rewards-container">
      <div class="reward-item">
        <i class="fa fa-diamond reward-icon"></i>
        <span class="reward-text">150积分</span>
      </div>
      <div class="reward-item">
        <i class="fa fa-ticket reward-icon"></i>
        <span class="reward-text">2张体验券</span>
      </div>
      <div class="reward-item reward-highlight">
        <i class="fa fa-medal reward-icon"></i>
        <span class="reward-text">人脉拓展家勋章</span>
      </div>
      <div class="reward-item">
        <i class="fa fa-percent reward-icon"></i>
        <span class="reward-text">会员折扣券9折</span>
      </div>
    </div>
  </div>
  
  <!-- 进度展示 -->
  <div class="progress-section">
    <h2 class="section-title">
      <i class="fa fa-tasks section-icon"></i>
      任务进度
    </h2>
    <div class="progress-container">
      <div class="progress-bar-container">
        <div class="progress-bar" style="width: 66%;"></div>
      </div>
      <div class="progress-text">
        <span>已邀请2位好友</span>
        <span>2/3 位</span>
      </div>
    </div>
    
    <h3 style="font-size: 15px; font-weight: 600; margin: 20px 0 15px;">完成步骤</h3>
    <div class="progress-steps">
      <div class="step-item">
        <div class="step-number completed">1</div>
        <div class="step-content">
          <div class="step-title">获取邀请链接</div>
          <div class="step-desc">生成你的专属邀请链接或二维码</div>
          <span class="step-status status-completed">已完成</span>
        </div>
      </div>
      
      <div class="step-item">
        <div class="step-number completed">2</div>
        <div class="step-content">
          <div class="step-title">分享给潜在好友</div>
          <div class="step-desc">通过微信、QQ或其他渠道分享邀请</div>
          <span class="step-status status-completed">已完成</span>
        </div>
      </div>
      
      <div class="step-item">
        <div class="step-number active">3</div>
        <div class="step-content">
          <div class="step-title">好友完成注册</div>
          <div class="step-desc">好友通过你的链接注册并完成新手引导</div>
          <span class="step-status status-pending">进行中 (2/3)</span>
        </div>
      </div>
      
      <div class="step-item">
        <div class="step-number">4</div>
        <div class="step-content">
          <div class="step-title">领取任务奖励</div>
          <div class="step-desc">完成所有邀请后即可领取对应奖励</div>
          <span class="step-status status-pending">未开始</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 已邀请好友列表 -->
  <div class="progress-section">
    <h2 class="section-title">
      <i class="fa fa-user-plus section-icon"></i>
      已邀请好友
    </h2>
    
    <div style="display: flex; flex-direction: column; gap: 12px;">
      <div style="display: flex; align-items: center; padding: 10px; background-color: var(--bg-light); border-radius: 8px;">
        <img src="https://picsum.photos/200/200?random=10" alt="好友头像" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px;">
        <div style="flex: 1;">
          <div style="font-weight: 500; font-size: 15px;">张小明</div>
          <div style="font-size: 12px; color: var(--text-secondary);">已完成注册 · 2小时前</div>
        </div>
        <span class="step-status status-completed">有效</span>
      </div>
      
      <div style="display: flex; align-items: center; padding: 10px; background-color: var(--bg-light); border-radius: 8px;">
        <img src="https://picsum.photos/200/200?random=11" alt="好友头像" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px;">
        <div style="flex: 1;">
          <div style="font-weight: 500; font-size: 15px;">李华</div>
          <div style="font-size: 12px; color: var(--text-secondary);">已完成注册 · 1天前</div>
        </div>
        <span class="step-status status-completed">有效</span>
      </div>
      
      <div style="display: flex; align-items: center; padding: 10px; background-color: var(--bg-light); border-radius: 8px;">
        <img src="https://picsum.photos/200/200?random=12" alt="好友头像" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; opacity: 0.5;">
        <div style="flex: 1;">
          <div style="font-weight: 500; font-size: 15px; opacity: 0.5;">王芳</div>
          <div style="font-size: 12px; color: var(--text-secondary);">未完成注册 · 3天前</div>
        </div>
        <span class="step-status" style="background-color: var(--bg-light); color: var(--text-secondary);">待完成</span>
      </div>
    </div>
  </div>
  
  <!-- 任务说明 -->
  <div class="instructions-section">
    <h2 class="section-title">
      <i class="fa fa-info-circle section-icon"></i>
      任务说明
    </h2>
    <ul class="instruction-list">
      <li class="instruction-item">邀请的用户必须是从未注册过本社区的新用户</li>
      <li class="instruction-item">好友需通过你的专属链接或二维码完成注册</li>
      <li class="instruction-item">好友完成注册后需完成新手引导才算有效邀请</li>
      <li class="instruction-item">任务奖励将在完成所有邀请后自动发放至账户</li>
      <li class="instruction-item">恶意注册或作弊行为将取消任务资格</li>
    </ul>
  </div>
  
  <!-- 常见问题 -->
  <div class="faq-section">
    <h2 class="section-title">
      <i class="fa fa-question-circle section-icon"></i>
      常见问题
    </h2>
    
    <div class="faq-item">
      <div class="faq-question">
        <i class="fa fa-circle" style="font-size: 6px;"></i>
        <span>如何查看我的邀请链接？</span>
      </div>
      <div class="faq-answer">
        点击"生成邀请链接"按钮，系统将自动为你生成专属邀请链接和二维码，你可以选择合适的方式分享给好友。
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <i class="fa fa-circle" style="font-size: 6px;"></i>
        <span>好友注册后多久会显示在邀请列表中？</span>
      </div>
      <div class="faq-answer">
        好友完成注册并登录后，通常会在5分钟内显示在你的邀请列表中。如果长时间未显示，请检查邀请链接是否正确。
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <i class="fa fa-circle" style="font-size: 6px;"></i>
        <span>如果好友注册后未完成新手引导，算有效邀请吗？</span>
      </div>
      <div class="faq-answer">
        不算。只有完成新手引导的好友才算有效邀请。你可以提醒好友完成新手引导以帮助你完成任务。
      </div>
    </div>
    
    <div class="faq-item">
      <div class="faq-question">
        <i class="fa fa-circle" style="font-size: 6px;"></i>
        <span>任务奖励有有效期吗？</span>
      </div>
      <div class="faq-answer">
        任务奖励中的积分无有效期，体验券和折扣券有效期为30天，请在有效期内使用。
      </div>
    </div>
  </div>
  
  <!-- 底部操作按钮 -->
  <div class="action-bar">
    <button class="action-btn btn-secondary">
      <i class="fa fa-history mr-1"></i> 邀请记录
    </button>
    <button class="action-btn btn-primary">
      <i class="fa fa-share-alt mr-1"></i> 继续邀请
    </button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 返回按钮
    document.querySelector('.back-btn').addEventListener('click', function() {
      history.back();
    });
    
    // 规则说明按钮
    document.querySelector('.header-btn').addEventListener('click', function() {
      alert('任务规则：\n1. 每个自然周可参与一次本任务\n2. 邀请的用户必须为新注册用户\n3. 任务奖励将在完成后24小时内发放\n4. 作弊行为将取消任务资格并可能导致账号处罚');
    });
    
    // 邀请记录按钮
    document.querySelector('.btn-secondary').addEventListener('click', function() {
      alert('查看所有邀请记录：\n- 已成功邀请：2人\n- 待完成注册：1人\n- 无效邀请：0人\n- 本周邀请上限：5人');
    });
    
    // 继续邀请按钮
    document.querySelector('.btn-primary').addEventListener('click', function() {
      // 创建分享模态框
      const modal = document.createElement('div');
      modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-500 flex items-end justify-center';
      modal.innerHTML = `
        <div class="bg-white w-full rounded-t-2xl p-5">
          <div class="text-center mb-6">
            <h3 class="text-lg font-semibold">分享邀请链接</h3>
            <p class="text-sm text-secondary mt-2">通过以下方式邀请好友</p>
          </div>
          
          <div style="background-color: var(--primary-light); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
            <div style="display: flex; align-items: center; gap: 10px;">
              <div style="background-color: white; width: 80px; height: 80px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--primary);">
                <i class="fa fa-qrcode"></i>
              </div>
              <div style="flex: 1;">
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 5px;">你的专属邀请码</div>
                <div style="font-size: 16px; font-weight: 700; letter-spacing: 2px;">SOCIAL-8F7E</div>
                <button style="background: none; border: none; color: var(--primary); font-size: 13px; padding: 0; margin-top: 5px; display: flex; align-items: center; gap: 5px;">
                  <i class="fa fa-copy"></i> 复制邀请码
                </button>
              </div>
            </div>
          </div>
          
          <div class="grid grid-cols-4 gap-4 text-center">
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-[#E8F0FE] flex items-center justify-center mb-2">
                <i class="fa fa-weixin text-[#07C160]"></i>
              </div>
              <span class="text-sm">微信</span>
            </div>
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-[#E8F0FE] flex items-center justify-center mb-2">
                <i class="fa fa-qq text-[#12B7F5]"></i>
              </div>
              <span class="text-sm">QQ</span>
            </div>
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-[#E8F0FE] flex items-center justify-center mb-2">
                <i class="fa fa-link text-[#666]"></i>
              </div>
              <span class="text-sm">复制链接</span>
            </div>
            <div class="flex flex-col items-center p-3 rounded-lg hover:bg-gray-100 cursor-pointer">
              <div class="w-12 h-12 rounded-full bg-[#E8F0FE] flex items-center justify-center mb-2">
                <i class="fa fa-more text-[#666]"></i>
              </div>
              <span class="text-sm">更多</span>
            </div>
          </div>
          
          <div class="mt-8">
            <button class="w-full py-3 bg-gray-100 rounded-lg text-gray-700 font-medium" id="closeShare">取消</button>
          </div>
        </div>
      `;
      document.body.appendChild(modal);
      document.body.style.overflow = 'hidden';
      
      // 关闭按钮事件
      modal.querySelector('#closeShare').addEventListener('click', function() {
        modal.remove();
        document.body.style.overflow = '';
      });
      
      // 点击外部关闭
      modal.addEventListener('click', function(e) {
        if (e.target === modal) {
          modal.remove();
          document.body.style.overflow = '';
        }
      });
    });
  </script>
</body>
</html>